<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<style>
    ul.ztree {
        border: 1px solid #ccc;
        background-color: #fff;
        height: 400px;
        overflow-y: scroll;
        overflow-x: auto;
    }
</style>
<!-- Content Header (Page header) -->
<section class="content-header" style="">
    <h1>
        用户归属管理
        <small>归属管理</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
        <li><a href="#">用户归属管理</a></li>
        <li class="active">归属管理</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <div id="toolbar">
                        <form class="form-inline" id="searchForm">
                            <div class="form-group">
                                <label for="searchPhone">用户</label>
                                <input type="text" class="form-control input-sm" name="phone" id="searchPhone"
                                       placeholder="请输入用户号码">
                            </div>
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-default"
                                        onclick="javascript:$('table').bootstrapTable('refresh', {silent: true});">
                                    <i class="glyphicon glyphicon-search"></i>
                                    查询
                                </button>
                                <button type="reset" class="btn btn-default">
                                    <i class="glyphicon glyphicon-trash"></i>
                                    清空
                                </button>
                            </div>
                        </form>
                    </div>
                    <!--<p id="user" th:text="${user}">Some text here...</p>-->
                    <table id="table"></table>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->

        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->

<script th:inline="javascript">

    var $table = $('#table');

    $(function () {
        // bootstrap table初始化
        // http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
        $table.bootstrapTable({
            url: CONTEXT_PATH + '/station/list',
            idField: 'id',
            searchOnEnterKey: false,
            sidePagination : 'server',
            columns: [
                {field: 'state', checkbox: true},
                {field: 'phone', title: '用户', sortable: true, halign: 'left'},
                {field: 'packageMain', title: '主套擦', sortable: true, halign: 'left'},
                {field: 'arpu', title: '话费', sortable: true, halign: 'left'},
                {field: 'grid', title: '区域', sortable: true, halign: 'left'},
                {field: 'stationBase', title: '位置', sortable: true, halign: 'left'},
            ]
        });
    });
</script>
</html>